<template>
	<view class="container">
		<view class="top">
			<text class="title">审批分类:<text>{{processInsName}}</text></text>
			<text class="applicant">接待人:<text>{{body.subscribe.receptionistIdText}}</text></text>
			<text class="time">{{body.subscribe.createdTime}}</text>
		</view>
		<!-- 物资领用流程 -->
		<view class="materialData">
			<view class="material">
				<view>
					<text>成员名称:</text>
					<text>{{body.command.memberName}}</text>
				</view>
				<view>
					<text>性别:</text>
					<text>{{body.subscribe.genderText}}</text>
				</view>
				<view>
					<text>电话:</text>
					<text>{{body.subscribe.phone}}</text>
				</view>
				<view>
					<text>身份证:</text>
					<text>{{body.subscribe.idCard}}</text>
				</view>
				<view>
					<text>生日:</text>
					<text>{{body.subscribe.birthday}}</text>
				</view>
				<view>
					<text>学历:</text>
					<text>{{body.subscribe.educationText}}</text>
				</view>
				<view>
					<text>地址:</text>
					<text>{{body.subscribe.address}}</text>
				</view>
				<view>
					<text>会员:</text>
					<text>{{body.subscribe.memberTypeText}}</text>
				</view>
				<view>
					<text>有效期:</text>
					<text>{{body.subscribe.overdueDate}}</text>
				</view>
				<view>
					<text>卡费:</text>
					<text>{{body.subscribe.cardFee}}</text>
				</view>
				<view>
					<text>余额:</text>
					<text>{{body.subscribe.balanceFee}}</text>
				</view>
			</view>
			<view class="reviewComments">
				<view><text>审核意见:</text></view>
				<hr>
				<scroll-view scroll-y="true" class="scrollview">
					<textarea class="textarea" maxlength="2000" placeholder="请输入审核意见"></textarea>
				</scroll-view>
			</view>
		</view>
		<view class="result">
			<view>
				<view :class="{fail:current==0}" @click="fail()">
					<text>不通过</text>
				</view>
				<view :class="{fail:current==1}" @click="adopt()">
					<text>通过</text>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				processInsName: '',
				flowNo: '',
				businessId: '',
				flowName: '',
				current: 1,
				body: {
					subscribe: {},
					command: {},
				},
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.businessId = option.businessId
			this.processInsName = option.processInsName
			this.flowNo = option.flowNo
			this.flowName = option.flowName
			console.log(this.flowNo, this.businessId, this.processInsName, this.flowName)
			// console.log(this.flowNo, this.flowName)
			this.reserve()
		},
		methods: {
			async reserve() {
				const res = await this.$myRequest({
					url: '/api-sale/subscribe/process/taskId/' + this.businessId,
					method: "get",
				})
				if (res.success == true) {
					this.body = res.body
				}
			}
		}
	}
</script>

<style lang="scss">
	.top {
		width: 100%;
		height: 190rpx;
		background-color: #FFFFFF;

		.title {
			font-size: 28rpx;
			font-weight: bold;
			position: absolute;
			left: 65rpx;
			margin-top: 30rpx;

			text {
				margin-left: 10rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #959595;
			}
		}

		.applicant {
			font-size: 28rpx;
			font-weight: bold;
			position: absolute;
			left: 65rpx;
			margin-top: 80rpx;

			text {
				margin-left: 10rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #959595;
			}
		}

		.time {
			font-size: 28rpx;
			position: absolute;
			left: 65rpx;
			margin-top: 130rpx;
			color: #a6a6a6;
		}
	}

	.materialData {
		.material {
			width: 84%;
			height: 600rpx;
			border-radius: 10rpx;
			margin: 20rpx auto 0 auto;
			padding-left: 40rpx;
			padding-right: 20rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #4d4d4d;
			background-color: #FFFFFF;

			view:nth-child(1) {
				width: 100%;
				height: 50rpx;
				padding-top: 30rpx;
				line-height: 50rpx;

				text {
					text {
						margin-left: 10rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #959595;
					}
				}
			}

			view {
				width: 100%;
				height: 50rpx;
				line-height: 50rpx;
				display: flex;
				text:nth-child(1) {
					width: 27%;
					right: 0;
					font-size: 28rpx;
					font-weight: bold;
					// text-align: center;
				}
				text:nth-child(2) {
					width: 100%;
					right: 0;
					font-size: 28rpx;
					font-weight: bold;
					color: #959595;
				}
			}
		}

		.reviewComments {
			width: 84%;
			height: 170px;
			font-size: 28rpx;
			font-weight: bold;
			border-radius: 10rpx;
			margin: 20rpx auto 0 auto;
			padding-left: 40rpx;
			padding-right: 20rpx;
			color: #4d4d4d;
			background-color: #FFFFFF;

			.textarea {
				width: 100%;
				height: 110px;
				font-size: 28rpx;
				font-weight: bold;
				color: #4d4d4d;
			}

			view {
				padding-top: 30rpx;
				width: 100%;
				height: 50rpx;
				;
				line-height: 50rpx;
				;
			}

			hr {
				width: 100%;
				height: 2px;
				border: 0;
				margin-bottom: 10rpx;
				background-color: #c3c7cc;
			}
		}
	}

	.result {
		width: 92%;
		height: 80rpx;
		line-height: 80rpx;
		margin: 40rpx auto 50rpx auto;
		display: flex;
		justify-content: space-between;

		view {
			display: flex;
			width: 100%;

			view {
				margin: 0;
				padding: 0;
				width: 50%;
				border: 1px solid;
				color: #109EF8;

				text {
					text-align: center;
					color: #109EF8;
					width: 100%;
				}
			}

			.fail {
				margin: 0;
				padding: 0;
				width: 50%;
				background-color: #109EF8;
				border: 1px solid;
				color: #109EF8;

				text {
					text-align: center;
					color: #FFFFFF;
					width: 100%;
				}
			}
		}
	}
</style>
